<template>
  <div class="icons clearfix">
    <div class="icon1" v-for="item in iconsList1" :key="item.id">
      <img :src="item.imgSrc" alt />
      <p>{{item.desc}}</p>
    </div>

    <div class="icon2" v-for="item in iconsList2" :key="item.id">
      <img :src="item.imgSrc" alt />
      <p>{{item.desc}}</p>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      iconsList1: [
        {
          id: '01',
          imgSrc: '//s.qunarzz.com/homenode/images/touchheader/hotel.png',
          desc: '酒店',
        },
        {
          id: '02',
          imgSrc: '//s.qunarzz.com/homenode/images/touchheader/flight.png',
          desc: '机票',
        },
        {
          id: '03',
          imgSrc: '//s.qunarzz.com/homenode/images/touchheader/train.png',
          desc: '火车票',
        },
        {
          id: '04',
          imgSrc: '//s.qunarzz.com/homenode/images/touchheader/package.png',
          desc: '度假',
        },
        {
          id: '05',
          imgSrc: '//s.qunarzz.com/homenode/images/touchheader/piao.png',
          desc: '景点门票',
        },
      ],
      iconsList2: [
        {
          id: '001',
          imgSrc: 'https://picbed.qunarzz.com/f5e5770393d759578962e53ee67798c8.png',
          desc: '海外酒店',
        },
        {
          id: '002',
          imgSrc: 'https://picbed.qunarzz.com/a36d2288f19e54562338f4d8ef986288.png',
          desc: '低价机票',
        },
        {
          id: '003',
          imgSrc: 'https://picbed.qunarzz.com/377db8cb2143aebf01869c9baad3d325.png',
          desc: '汽车票船票',
        },
        {
          id: '004',
          imgSrc: 'https://picbed.qunarzz.com/ae617a31e0bd5803d76918b817f6d942.png',
          desc: '自由行',
        },
        {
          id: '005',
          imgSrc: 'https://picbed.qunarzz.com/1316dc82d1ce6259686d5a68880e5a9d.png',
          desc: '攻略',
        },
        {
          id: '006',
          imgSrc: 'https://picbed.qunarzz.com/01d2f57f920666364197a850dab859a8.png',
          desc: '民宿客栈',
        },
        {
          id: '007',
          imgSrc: 'https://picbed.qunarzz.com/83af731055e121a3251690b225327b56.png',
          desc: '专车自驾',
        },
        {
          id: '008',
          imgSrc: 'https://picbed.qunarzz.com/5b6737be49ca243072ca614f07803b83.png',
          desc: '赚钱·信用卡',
        },
        {
          id: '009',
          imgSrc: 'https://picbed.qunarzz.com/1e107321f5396ea4994cd832232ecf8a.png',
          desc: '旅游团购',
        },
        {
          id: '0010',
          imgSrc: 'https://picbed.qunarzz.com/c65b3bb7571a6bd62df669213e44b84d.png',
          desc: '一日游',
        },
        {
          id: '0011',
          imgSrc: 'https://picbed.qunarzz.com/f6bb08a239ce1b038204120a8d1e4669.png',
          desc: '特惠酒店',
        },
        {
          id: '0012',
          imgSrc: 'https://picbed.qunarzz.com/3a08f360e958ccb2b947049387873ace.png',
          desc: '借钱',
        },
        {
          id: '0013',
          imgSrc: 'https://picbed.qunarzz.com/19b4f6d2fabd617789fa5aad65b249da.png',
          desc: '白金卡',
        },
        {
          id: '014',
          imgSrc: 'https://img1.qunarzz.com/order/comp/2007/23/734c3c62d2adce02.png',
          desc: '形程设计',
        },
        {
          id: '015',
          imgSrc: 'https://picbed.qunarzz.com/25e3b9f17a21a6e0113c57a23ffccde4.png',
          desc: '周边短途',
        },
      ],
    }
  },
  created() {},
  methods: {},
}
</script>


<style lang="stylus" scoped>
.icons {
  overflow: hidden;
  height: 0;
  padding-bottom: 72%;
  margin: 0.093333rem 0.133333rem;
}

.icon1 {
  float: left;
  width: 20%;
  height: 0;
  padding-bottom: 21%;
  background-color: #fff;
  text-align: center;
  margin-bottom: 0.133333rem;
}

.icon1 img {
  width: 0.733333rem;
}

.icon1 p {
  display: inline-block;
  height: 0.266667rem;
  font-size: 0.186667rem;
  margin-top: 0.093333rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.icon2 {
  float: left;
  width: 20%;
  height: 0;
  padding-bottom: 15%;
  background-color: #fff;
  text-align: center;
  margin-bottom: 0.133333rem;
}

.icon2 img {
  width: 0.426667rem;
}

.icon2 p {
  height: 0.266667rem;
  font-size: 0.186667rem;
  margin-top: 0.093333rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>